<template>
    <div class="app-container">
        <el-row :gutter="24" class="mb8">
            <el-col :span="24" style="border-left: 1px solid  rgba(240,240,240,1);">
                <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
                    <el-row :gutter="20" class="mb8">
                        <el-col :span="18">
                            <el-form-item label="用户组名称" prop="name">
                                <el-input v-model="queryParams.name" placeholder="请输入" clearable size="small"
                                    style="width: 240px" @keyup.enter.native="handleQuery" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" right>
                            <el-form-item style="float:right;">
                                <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini"
                                    @click="handleQuery">查询</el-button>
                                <el-button v-preventReClick icon="el-icon-refresh" class="border-Blue" size="mini"
                                    @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button v-preventReClick type="primary" size="mini" @click="handleAdd"
                            v-hasPermi="['system:role:create']">新建用户组</el-button>
                    </el-col>

                </el-row>

                <el-table ref="table" v-loading="loading" :data="userList" show-overflow-tooltip class="margin-top">

                    <el-table-column label="用户组名称" prop="name"></el-table-column>
                    <el-table-column label="用户组编码" prop="code" :show-overflow-tooltip="true" />
                    <el-table-column label="类型" prop="type" :show-overflow-tooltip="true">
                        <template v-slot="scope">
                            {{ scope.row.type == 1?" 普通用户组": scope.row.type == 2?"系统用户组":""}}
                        </template>
                    </el-table-column>
                    <el-table-column label="描述" prop="des" :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
                        <template v-slot="scope">
                            <el-button v-preventReClick size="mini" type="text"
                                @click="handleMenu('1', scope.row)">查看</el-button>
                            <span v-if="!scope.row.isPluralistic" class="spans">|</span>
                            <el-button v-if="!scope.row.isPluralistic" v-preventReClick size="mini" type="text"
                                @click="handleMenu('2', scope.row)">编辑</el-button>
                            <span v-if="!scope.row.isPluralistic" class="spans">|</span>

                            <el-popover placement="bottom-end" width="180" :ref="'popover-' + scope.$index">
                                <p>确定删除此用户组吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="closePopover(scope.$index)">取消</el-button>
                                    <el-button type="primary" size="mini"
                                        @click="handleDelete(scope.row); closePopover(scope.$index)">确认</el-button>
                                </div>
                                <el-button slot="reference" v-if="!scope.row.isPluralistic" v-preventReClick size="mini"
                                    type="text" @click="openPopover(scope.$index)">删除</el-button>

                            </el-popover>


                        </template>
                    </el-table-column>

                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-col>
        </el-row>


        <!-- 添加或修改角色配置对话框 -->
        <AddGroupUser ref="AddGroupUser" @getList="getList"></AddGroupUser>
    </div>
</template>
  
<script>
import {
    sysUserGroupList,
    delSystemUserGroup
} from "@/api/system/userGroup";
import { CommonStatusEnum, SystemDataScopeEnum } from "@/utils/constants";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
//添加用户组
import AddGroupUser from './components/addGroupUser.vue'
export default {
    name: "SystemRole",
    components: { AddGroupUser },
    data() {
        return {
            titleShow: '',
            dataSure: {},
            nodeSure: {},
            command: '',
            dialogShow: false,
            onlyManger: false,
            dialogVisible: false,
            isClick: true,
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 角色表格数据
            userList: [],
            // 弹出层标题
            title: "",
            titleUser: "",
            // 部门列表
            deptID: undefined,
            deptOptions: [], // 部门属性结构
            depts: [], // 部门列表
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                name: undefined
            },
            // 表单参数
            form: {},
        };
    },
    mounted() {
        this.resetQuery()
    },
    methods: {
        openPopover(index) {
            //doShow这是一个方法,但是不知道为什么不能加()，否则不起作用
            this.$refs['popover-' + index].doShow;

            // this.$refs.index.doShow();
        },
        closePopover(index) {
            //一脸懵逼,doClose居然需要加(),否则不起作用
            this.$refs['popover-' + index].doClose();
        },
        /** 查询角色列表 */
        getList() {
            this.loading = false;
            console.log(this.queryParams, '00011');
            sysUserGroupList(this.queryParams).then(
                response => {
                    this.userList = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                }
            );
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.$refs.AddGroupUser.handleadd('0')
        },

        update() {
            this.dialogVisible = false
            if (this.onlyManger == true) {
                return
            }
        },
        // 表单重置
        reset() {
            this.queryParams.pageNo = 1
            this.handleQuery();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                name: undefined
            }
            //this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1;
            this.getList();
        },

        /** 分配菜单权限操作 */
        handleMenu(type, row) {
            this.$refs.AddGroupUser.handleadd(type, row.id)
            // console.log(row, 'row----')
            // this.reset();
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            delSystemUserGroup({id: row.id}).then(
                response => {
                    if(response.code == 200 ||response.code == 0)
                    this.$modal.msgSuccess("删除成功");
                    this.handleQuery()
                }
            );
        },
    }
};
</script>
  
  
<style lang="scss" scoped>
::v-deep .el-checkbox__inner {
    border-radius: 50%;
}

.isPluralistic {
    color: #fff;
    background-color: #1257FF;
    border-color: #1257FF;
    padding: 1px 2px;
    font-size: 12px;
    border-radius: 5px;
    box-sizing: border-box;
}

.footLine {
    border-bottom: 1px solid #ddd;
}
</style>